<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>
	<style>
		.warning{
			border-color: red !important;
		}
	</style>
</head>
<body>
<div class="form-inline definewidth m20">
   <table>
		<tr>
			<td align="right">原密码:</td><td><input name="password" type="password"/><span id="passwordTips" style="display:none;margin-left:10px;color:red;">原密码不正确，请重新输入</span></td>
		</tr>
		<tr>
			<td align="right">新密码:</td><td><input onblur="newPasswordCheck(this.value)" name="newPassword" type="password"/><span id="newPasswordTips" style="display:none;margin-left:10px;color:red;">密码长度6-16位，必须由数字，字母及字符组成</span></td>
		</tr>
		<tr>
			<td align="right">确认密码:</td><td><input onblur="repeatPasswordCheck(this.value)" name="repeatPassword" type="password"/><span id="repeatPasswordTips" style="display:none;margin-left:10px;color:red;">密码不一致，请重新输入</span></td>
		</tr>
		<tr>
			<td colspan="2" align="center"><br/>
				<input type="button" id="save-btn" value="保存" class="btn btn-primary"/>
			</td>
		</tr>
   </table>
</div>
<script>

	let passwordCheckFlag = false;
	let newPasswordCheckFlag = false;
	let repeatPasswordCheckFlag = false;
	let newPasswordCheckTime;
	let repeatPasswordCheckTime;
	let saveFlag = true;
	// 解析cookie里的jwtToken
	jwtToken = $.cookie("jwtToken");
	// 解析令牌中的payLoad信息
	let payLoad = JSON.parse(window.atob(jwtToken.split(".")[1]));
	// 获取uId
	let uId = payLoad.uId;
	// 验证原始密码是否正确校验
	function passwordCheck(password){
		// 发送ajax检测
		$.ajax({
			type: "POST",
			url: origin + "/access/verify-password",
			xhrFields: {
			   withCredentials: true
			},
			crossDomain: true,
			data: {uPassword:password,uId:uId,jwtToken:jwtToken},
			dataType: "json",
			async: false,
			success: function (data) {
				if (data.code == 200){
					// 与原始密码一致
					$("#passwordTips").hide();
					$("input[name='password']").removeClass("warning");
					passwordCheckFlag = true;
				}else{
					// 与原始密码不一致
					$("#passwordTips").show();
					$("input[name='password']").addClass("warning");
					layer.msg(data.msg,function(){})
					passwordCheckFlag = true;
				}
			},
			complete : function(xhr, status) {
				myComplete(xhr, status);
			}
		})
	}
	// 新密码强度,非空校验
	function newPasswordCheck(newPassword){
		newPasswordCheckTime = setTimeout(function(){
			// 密码长度6-16位，必须包含有数字，字母及特殊字符。
			var reg = /^.*(?=.{6,16})(?=.*\d)(?=.*[A-z])(?=.*[!@#$%^&*_\-;:'"+=<>\\\|,\.?\(\)]).*$/;
			if(reg.test(newPassword)){
				newPasswordCheckFlag = true;
				$("#newPasswordTips").hide();
				$("input[name='newPassword']").removeClass("warning")
			} else {
				// layer.msg("密码强度太弱,请重新设置", function(){})
				newPasswordCheckFlag = false;
				$("#newPasswordTips").show();
				$("input[name='newPassword']").addClass("warning")
			}
		}, 50)
	}
	// 重复密码一致性校验
	function repeatPasswordCheck(repeatPassword){
		repeatPasswordCheckTime = setTimeout(function(){
			let newPassword = $("input[name='newPassword']").val().trim();
			if(repeatPassword != newPassword){
				// 重复密码与新密码不一致
				$("#repeatPasswordTips").show();
				$("input[name='repeatPassword']").addClass("warning")
				repeatPasswordCheckFlag = false;
			} else {
				// 重复密码一致
				$("#repeatPasswordTips").hide();
				$("input[name='repeatPassword']").removeClass("warning")
				repeatPasswordCheckFlag = true;
			}
		}, 50)
	}


	$(function(){
		// 监听保存按钮
		$("#save-btn").on("click", function(){
			layer.load(0)
			// 防止onblur与onclick冲突,确保onclick优先执行
			clearTimeout(newPasswordCheckTime)
			clearTimeout(repeatPasswordCheckTime)
			// 获取input值
			let password = $("input[name='password']").val().trim();
			let newPassword = $("input[name='newPassword']").val().trim();
			let repeatPassword = $("input[name='repeatPassword']").val().trim();
			passwordCheckFlag = false;
			newPasswordCheckFlag = false;
			repeatPasswordCheckFlag = false;
			// 验证原始密码是否正确校验
			passwordCheck(password);
			// 新密码强度,非空校验
			newPasswordCheck(newPassword);
			// 重复密码一致性校验
			repeatPasswordCheck(repeatPassword);
			// 等待验证完毕
			setTimeout(function(){
				layer.closeAll()
				if( !passwordCheckFlag ){return false;}
				if( !newPasswordCheckFlag ){return false;}
				if( !repeatPasswordCheckFlag ){return false;}
				// 全部校验成功
				if(saveFlag){
					// 一旦执行即锁死, 防止多次提交
					saveFlag = false;
					layer.load(0)
					$.ajax({
						type: "POST",
						url: origin + "/user/" + uId,
						xhrFields: {
						   withCredentials: true
						},
						crossDomain: true,
						data: {
							_method: "PUT", uPassword: newPassword, jwtToken:jwtToken
						},
						dataType: "json",
						success: function (data) {
							layer.closeAll()
							if (data.code == 200) {
								layer.msg("修改成功")
							} else {
								layer.msg(data.msg, function () {
								})
							}
						}
						, complete: function (xhr, status) {
							myComplete(xhr, status);
						}
					})
				}
			},120)
		})
	})

</script>
</body>
</html>